<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
      timer: null,
    };
  },

  /* 
    在new Vue 之后 开始初始化生命周期，事件
    此时的data数据 及methods中方法都没有放入到实例上 无法访问
  */
  beforeCreate() {
    console.log(this, "beforeCreate中的this");
    debugger;
  },
  /* 
    beforeCreate和created中的创建前创建后的`创建`指的是:_data数据的创建和数据代理、数据劫持的创建
  */

  /* 
    在created前完成数据劫持，数据代理
    此时可以访问到data中的数据，methods中配置的方法
  */
  created() {
    console.log(this, "created中的this");
    debugger;
  },

  /* 
    下一阶段 Vue开始解析模板,生成虚拟DOM 
     是否有el挂载或$mount挂载 如果是往下一步走，是否有template模板,如果有则按照template模板进行解析渲染,
     如果没有则按照外层的html元素解析,也就是App 
     
  */
};
</script>

<style></style>
